<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list lines="none">
    <ion-list-header>
      <ion-label>Resources</ion-label>
    </ion-list-header>
    <ion-item>
      <ion-text color="primary" placeholder="显示框">
        <h1>{{value}}</h1>
      </ion-text>
    </ion-item>
    <ion-item>
      <ion-input type="text" [(ngModel)]="value" placeholder="输入框"></ion-input>
    </ion-item>
    <ion-item>
      <ion-progress-bar type="determinate" [value]="data" [buffer]="bufferdata" reversed="false" color="primary">

      </ion-progress-bar>
    </ion-item>
    <ion-item>
      <ion-button (click)="onClick('test-events')" expand="block" fill="clear" shape="round">
        testEvents
      </ion-button>
    </ion-item>
    <ion-item>
      <ion-button (click)="onClick('send')" expand="block" fill="clear" shape="round">
        sendMessage
      </ion-button>
    </ion-item>
    <ion-item>
      <ion-label>Awesome Label</ion-label>
      <i class="iconfont  icon-yiyuan" style="width: 40px;height: 40px;font-size: 40px; color: aqua;"></i>
    </ion-item>
    <ion-item (click)="openurl()">
      <ion-label>百度一下你就知道</ion-label>
    </ion-item>

  </ion-list>


  <ionic5-star-rating #rating activeIcon="ios-star" defaultIcon="ios-star-outline" activeColor="#488aff"
    defaultColor="#f4f4f4" readonly="false" rating="3" fontSize="32px" (ratingChanged)="logRatingChange($event)">
  </ionic5-star-rating>


  <div class="comment-title">
    <div class="comment-titlecell">
      <ion-row class="item_right_path">
        <ion-col size="6" style="padding: 0px; display:flex">
          <ion-label style="font-size: x-large; font-weight: bold;align-self: center;">游客评价</ion-label>
          <!-- <label ></label> -->
        </ion-col>
        <ion-col size="6" style="text-align: right;padding: 0px;">
          <ion-button *ngIf="islogin" (click)="oppagePl()" expand="block" shape="round" class="plbtn">
            写评论
          </ion-button>
        </ion-col>
      </ion-row>
    </div>
  </div>
  <div class="comment-sum">
    <div class="comment-sumcell">
      <ion-row class="item_right_path">
        <ion-col size="6">
          <ion-label style="font-size: large;  font-weight: bold; color: #18a788;">{{zpf}}分</ion-label>
        </ion-col>
        <ion-col size="6" style="text-align: right;">
          <ion-label style="font-size: small;    font-weight: bold;text-align: right;
          color: rgb(78, 76, 76);">景区总得分</ion-label>
        </ion-col>
      </ion-row>
      <ion-row class="item_right_path">
        <ion-col size="6">
          <ionic5-star-rating style="text-align: left;" activeIcon="star" defaultIcon="star-outline"
            activeColor="#f8934b" defaultColor="#f8934b" readonly="true" halfStar="true" rating="{{zpf}}"
            fontSize="18px">
          </ionic5-star-rating>

        </ion-col>
        <ion-col size="6" style="text-align: right;">
          <ion-label style="font-size: small;color: rgb(109, 108, 104)">3人点评</ion-label>
        </ion-col>
      </ion-row>
    </div>
  </div>
  <div class="comment-wrap" *ngFor="let item of items">
    <div class="photo">
      <img class='avatar' src="{{item.image}}">
    </div>
    <div class="comment-block">
      <ion-row class="item_right_path">
        <ion-col size="6">
          <ion-label style="font-size: small;    font-weight: bold;
           color: #000;">{{item.name}}</ion-label>
        </ion-col>
        <ion-col size="6" style="text-align: right;">
          <ion-label style="font-size: small;color: rgb(109, 108, 104) ; color: #18a788;">{{item.pf}}</ion-label>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="6">
          <ion-label style="font-size: small;">{{item.date}}</ion-label>
        </ion-col>
        <ion-col size="6">
          <ionic5-star-rating style="text-align: right; " activeIcon="star" defaultIcon="star-outline"
            activeColor="#f8934b" defaultColor="#f8934b" readonly="true" halfStar="true" rating="{{item.pf}}"
            fontSize="16px">
          </ionic5-star-rating>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-label>{{item.content}}</ion-label>
      </ion-row>
      <ion-row>
        <ion-col size="6">
          <img src="{{item.image}}" style="width:100%;">
        </ion-col>
        <ion-col size="6">
        </ion-col>
      </ion-row>
    </div>
  </div>


</ion-content>